import { Input, TreeSelect, Menu } from 'antd'
import React, { useState } from 'react'
import { templateTool } from '@/api/base-config.js'
import { useEffect } from 'react'
import { Stencil } from '@antv/x6-plugin-stencil'
import { TreeRectNode } from '@/components/flow-designer/nodes.js'
import { getTypeTree } from '@/api/type-tree.js'
import { flowInstanceSelectAll } from '@/api/test-case.js'
import  './index.less'
import { TemplateCategoryModal } from '../template-category/index.jsx'

const { Search } = Input
const CaseStencilPanel = (props) => {
  const { typeCode, templateType, templateName, graph } = props
  const domId = '_id' + Date.now()

  const [keyword, setKeyword] = useState('')
  const onKeywordChagne = (e) => {
    setKeyword(e.target.value)
  }

  const [tpyes, setTypes] = useState(undefined)
  const onTypesChange = (newValue) => {
    setTypes(newValue)
  }

  const fieldNames = {
    label: 'name',
    value: 'id',
    children: 'children',
  }
  const [typeTreeData, setTypeTreeData] = useState(undefined)
  const requestTypeTree = () => {
    getTypeTree({ typeCode }).then((res) => {
      setTypeTreeData(res.data)
    })
  }

  const [treeData, setTreeData] = useState([])

  const requestTreeData = () => {
    flowInstanceSelectAll({
      c_types: tpyes,
      key_word: keyword || undefined,
      template_type: templateType,
    }).then((res) => {
      setTreeData(res.data)
    })
  }

  const initStencil = () => {
    const stencil = new Stencil({
      title: templateName,
      target: graph,
      stencilGraphWidth: 260,
      collapsable: true,
      groups: [
        {
          title: '常用',
          collapsed: true,
          name: 'group1',
        },
      ],
      layoutOptions: {
        columns: 2,
        columnWidth: 80,
        rowHeight: 55,
      },
    })

    document.getElementById(domId).appendChild(stencil.container)

    const nodes = treeData.map((item) => {
      return new TreeRectNode({
        attrs: {
          label: {
            textWrap: {
              text: item.instanceName,
            },
          },
        },
        shape: 'tree-rect-node',
      })
    })

    stencil.load(nodes, 'group1')
  }

  const [contextStyle, setContextStyle] = useState(null)
  const [menuItems, setMenuItems] = useState([
    { label: '设置分类', key: 'item-1' }
  ])
  const onContextMenu = (event) => {
    console.log(event)
    setContextStyle({
      top: event.clientY,
      left: event.clientX,
    })
  }


  const [categoryData, setCategoryData] = useState(null)
  const onSuccess = () => {
    // 
  }
  const onClose = () => {
    setCategoryData(null)
  }

  const onMenuClick = (item) => {
    setCategoryData({})
    setContextStyle(null)
  }

  useEffect(() => {
    requestTreeData()
  }, [templateType, tpyes, keyword])

  useEffect(() => {
    if (graph && treeData.length > 0) {
      initStencil()
    }
  }, [graph, treeData])

  useEffect(() => {
    requestTypeTree()
  }, [])

  return (
    <div className="com-container">
      <div style={{padding: '8px'}}>
        <Input
          value={keyword}
          onChange={onKeywordChagne}
          placeholder={`请输入${templateName}`}
          style={{marginBottom: '8px'}}
          autoComplete='off'
        />
        <TreeSelect
          fieldNames={fieldNames}
          showSearch
          checkable
          style={{
            width: '100%',
          }}
          value={tpyes}
          dropdownStyle={{
            maxHeight: 300,
            overflow: 'auto',
          }}
          placeholder="请选择"
          allowClear
          treeDefaultExpandAll
          onChange={onTypesChange}
          treeData={typeTreeData}
        />
      </div>

      <div className="com-content" onContextMenu={onContextMenu}>
        <div id={domId}></div>
      </div>

      {
        contextStyle && <div className='context-menu' style={contextStyle}>
          <Menu items={menuItems} onClick={(event) => onMenuClick(event)} />
        </div>
      }

      <TemplateCategoryModal initData={categoryData} onClose={onClose} />
    </div>
  )
}

export default CaseStencilPanel
